<template>
  <!-- 海派订单列表的订单详情 -->
  <div>
    <el-dialog
      v-model="openDetail"
      fullscreen
      width="50%"
      :close-on-click-modal="false"
      :title="title"
    >
      <el-form
        ref="setFormRef"
        v-loading="loading"
        inline
        label-width="120px"
        class="queryParams"
        :model="updateForm"
        :rules="rules"
      >
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="常规信息" name="first">
            <el-scrollbar>
              <el-row>
                <el-col :span="24">
                  <div>基本信息</div>
                </el-col>
                <el-col>
                  <el-form-item label="系统订单号" prop="orderNo">
                    <el-input
                      v-model="updateForm.orderNo"
                      disabled
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="报价类型" prop="quotationType" :formatter="(row) => dicts.getDictLabel({ dict: DictDirection.报价类型, value: row.quotationType})">
                    <el-select
                      v-model="updateForm.quotationType"
                      filterable
                      :disabled="disableds"
                      placeholder="请选择报价类型"
                      @change="checkpiece"
                    >
                      <el-option
                        v-for="dict in dicts[DictDirection.报价类型]"
                        :key="dict.dictValue"
                        :label="dict.dictLabel"
                        :value="dict.dictValue"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item v-if="updateForm.quotationType != 3" :label="labels" prop="customPrice">
                    <el-input
                      v-model="updateForm.customPrice"
                      clearable
                      style="width: 200px;"
                      placeholder="请输入价格"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="签入员" prop="checkInMer">
                    <el-input v-model="updateForm.checkInMer" disabled></el-input>
                  </el-form-item>
                  <el-form-item label="业务员：" prop="businessManager">
                    <el-input v-model="updateForm.businessManager" disabled></el-input>
                  </el-form-item>
                  <el-form-item label="订单状态：" prop="splittingStatus" :formatter="(row) => dicts.getDictLabel({ dict: DictDirection.包裹状态, value: row.splittingStatus })">
                    <el-select
                      v-model="updateForm.splittingStatus"
                      filterable
                      disabled
                    >
                      <el-option
                        v-for="dict in dicts[DictDirection.包裹状态]"
                        :key="dict.dictValue"
                        :value="dict.dictValue"
                        :label="dict.dictLabel"
                      ></el-option>   
                    </el-select>
                  </el-form-item>
                  <el-form-item label="主转单号：" prop="mainTransferOrderNo">
                    <el-input v-model="updateForm.mainTransferOrderNo"> </el-input>
                  </el-form-item>
                  <el-form-item label="子转单号：" prop="transferOrderNo">
                    <el-input v-model="updateForm.transferOrderNo"> </el-input>
                  </el-form-item>
                  <el-form-item label="备注：" prop="remarks" style="width: 560px;">
                    <el-input
                      v-model="updateForm.remarks"
                      style="width: 397px;"
                       
                      type="textarea"
                    ></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button
                      v-if="xg=='2'"
                      v-loading="btnloading"
                      type="primary"
                      @click="handleEdit"
                    >
                      修改
                    </el-button>
                  </el-form-item>
                  <span class="notes">如果对应收费用信息有操作,请在备注栏加上备注</span>
                  <el-divider></el-divider>
                </el-col>
                <el-col :span="24">
                  <el-row>
                    <el-col :span="24" class="mb8">
                      <div>应收信息</div>
                    </el-col>
                    <el-col>
                      <el-form
                        :model="ruleForm"
                        inline
                        label-width="100px"
                        :disabled="disableds"
                      >
                        <el-form-item label="地址费" prop="地址费">
                          <el-select
                            v-model="ruleForm.地址费"
                            filterable
                            class="inputWidth"
                            :controls="false"
                            placeholder="请选择"
                          >
                            <el-option label="亚马逊地址" :value="0"></el-option>
                            <el-option label="私人地址" :value="1"></el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item label="报关件" prop="报关件">
                          <el-autocomplete v-model="ruleForm.报关件" class="inline-input" placeholder="请输入内容"></el-autocomplete>
                        </el-form-item>
                        <el-form-item label="品名附加费" prop="品名附加费">
                          <el-radio-group v-model="ruleForm.品名附加费" style="width: 230px;">
                            <el-radio :label="0"></el-radio>
                            <el-radio :label="1"></el-radio>
                            <el-radio :label="2"></el-radio>
                            <el-radio :label="3"></el-radio>
                            <el-radio :label="4"></el-radio>
                            <el-radio :label="5"></el-radio>
                          </el-radio-group>
                        </el-form-item>
                        <el-form-item label="超重/超长费" prop="超重/超长费">
                          <el-input
                            v-model="ruleForm['超重/超长费']"
                            clearable
                            :controls="false"
                            class="inputWidth"
                            placeholder="单价*件数"
                          ></el-input>
                        </el-form-item>
                        <el-form-item label="超品名费" prop="超品名费">
                          <el-input
                            v-model="ruleForm.超品名费"
                            clearable
                            :controls="false"
                            class="inputWidth"
                          ></el-input>
                        </el-form-item>
                        <el-form-item label="偏远费" prop="偏远费">
                          <el-input
                            v-model="ruleForm.偏远费"
                            clearable
                            :controls="false"
                            class="inputWidth"
                          ></el-input>
                        </el-form-item>
                      </el-form>
                      <el-divider></el-divider>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="24">
                  <el-row>
                    <el-col :span="24">
                      <el-row>
                        <el-col :span="24" class="mb8">收货信息</el-col>
                        <el-col>
                          <el-form-item label="客户简称" prop="customerCode">
                            <el-select
                              v-model="updateForm.customerCode"
                              disabled
                              placeholder="请选择客户"
                              clearable
                            >
                              <el-option
                                v-for="dict in dicts[DictDirection.客户]"
                                :key="dict.customerCode"
                                :label="dict.customerName"
                                :value="dict.customerCode"
                              ></el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item label="销售产品" prop="marketProducts" :formatter="(row) => dicts.getDictLabel({ dict: DictDirection.产品, value: row.marketProducts })">
                            <el-select
                              v-model="updateForm.marketProducts"
                              :disabled="disableds"
                              placeholder="请输入销售产品"
                              clearable
                            >
                              <el-option
                                v-for="dict in dicts[DictDirection.产品]"
                                :key="dict.salesProductCode"
                                :label="dict.salesProductName"
                                :value="dict.salesProductCode"
                              ></el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item label="收货类型：" prop="goodsType">
                            <el-select v-model="updateForm.goodsType" :disabled="disableds">
                              <el-option label="包裹" value="1"></el-option>
                              <el-option label="文件" value="2"></el-option>
                              <el-option label="袋子" value="3"></el-option>
                              <el-option label="其他" value="4"></el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item label="所属仓库：" prop="site" :formatter="(row) => dicts.getDictLabel({ dict: DictDirection.收货站点, value: row.site })">
                            <el-select
                              v-model="updateForm.site"
                              :disabled="disableds"
                              placeholder="请选择"
                            >
                              <el-option
                                v-for="dict in dicts[DictDirection.收货站点]"
                                :key="dict.deptId"
                                :label="dict.deptName"
                                :value="dict.deptId"
                              ></el-option>
                            </el-select>
                          </el-form-item>
                          
                          <el-form-item label="总计实重：" prop="receivingTotalWeight">
                            <el-input v-model="updateForm.receivingTotalWeight" disabled></el-input>
                          </el-form-item>
                          <el-form-item label="总体积重：" prop="receivingTotalWood">
                            <el-input v-model="updateForm.receivingTotalWood" disabled></el-input>
                          </el-form-item>
                          <el-form-item label="总计费重：" prop="receivingTotalCharging">
                            <el-input v-model="updateForm.receivingTotalCharging" disabled></el-input>
                          </el-form-item>
                          <el-form-item label="总件数：" prop="receivingTotal">
                            <el-input v-model="updateForm.receivingTotal" disabled></el-input>
                          </el-form-item>
                          <el-form-item label="收货材积系数：" prop="receivingWoodCoefficient">
                            <el-input v-model="updateForm.receivingWoodCoefficient" disabled></el-input>
                          </el-form-item>
                          <el-form-item label="收货体积系数：" prop="receivingVolumeCoefficient">
                            <el-input v-model="updateForm.receivingVolumeCoefficient" disabled></el-input>
                          </el-form-item>
                          <el-form-item label="收货计重规则：" prop="receivingWeightRule" :formatter="(row) => dicts.getDictLabel({ dict: DictDirection.计重规则, value: row.receivingWeightRule })">
                            <el-select
                              v-model="updateForm.receivingWeightRule"
                              filterable
                              placeholder="请输入计重规则"
                              clearable
                            >
                              <el-option
                                v-for="dict in dicts[DictDirection.计重规则]"
                                :key="dict.dictValue"
                                :value="dict.dictValue"
                                :label="dict.dictLabel"
                              ></el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item label="服务商简称：" prop="serviceAbbreviation">
                            <el-input v-model="updateForm.serviceAbbreviation" :disabled="disableds"></el-input>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-divider></el-divider>
                    </el-col>
                    <el-col :span="24">
                      <el-row>
                        <el-col :span="24" class="mb8">出货信息</el-col>
                        <el-col>
                          <el-form-item label="客户单号：" prop="waybillNo">
                            <el-input v-model="updateForm.waybillNo" :disabled="disableds"></el-input>
                          </el-form-item>
                          <el-form-item label="服务渠道：" prop="serviceChannelcode">
                            <el-input v-model="updateForm.serviceChannelcode" :disabled="disableds"></el-input>
                          </el-form-item>
                          <el-form-item label="出货时间：" prop="shipmentTime">
                            <el-date-picker
                              v-model="updateForm.shipmentTime"
                              type="date"
                              :disabled="disableds"
                              placeholder="选择日期"
                              format="YYYY-MM-DD"
                              value-format="YYYY-MM-DD"
                            ></el-date-picker>
                          </el-form-item>
                          <el-form-item label="总计实重：" prop="shipmentTotalWeight">
                            <el-input v-model="updateForm.shipmentTotalWeight" :disabled="disableds"></el-input>
                          </el-form-item>
                          <el-form-item label="总体积重：" prop="shipmentTotalWood">
                            <el-input v-model="updateForm.shipmentTotalWood" :disabled="disableds"></el-input>
                          </el-form-item>
                          <el-form-item label="总计费重：" prop="shipmentTotalCharging">
                            <el-input v-model="updateForm.shipmentTotalCharging" :disabled="disableds"></el-input>
                          </el-form-item>
                          <el-form-item label="总件数：" prop="shipmentTotal">
                            <el-input v-model="updateForm.shipmentTotal" :disabled="disableds"></el-input>
                          </el-form-item>
                          <el-form-item label="成本金额：" prop="payableAmount">
                            <el-input
                              v-model="updateForm.payableAmount"
                              :disabled="disableds"
                              :controls="false"
                            ></el-input>
                          </el-form-item>
                          <el-form-item label="清关时间：" prop="clearanceTime">
                            <el-date-picker
                              v-model="updateForm.clearanceTime"
                              :disabled="disableds"
                              type="date"
                              placeholder="选择日期"
                              format="YYYY-MM-DD"
                              value-format="YYYY-MM-DD"
                            />
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                  <el-divider></el-divider>
                </el-col>
                <el-col :span="24" class="mb8">
                  <el-row class="mb8">
                    <el-col>包裹信息</el-col>
                    <el-col style="height: 445px;">
                      <el-table
                        v-if="xg=='2'"
                        ref="table"
                        border
                        :data="updateForm.shipmentWoodInfo"
                        height="400"
                        class="mb8"
                        show-summary
                      >
                        <el-table-column
                          label="序号"
                          align="center"
                          type="index"
                          width="50"
                        ></el-table-column>
                        <el-table-column label="箱号" align="center" prop="caseNumber"></el-table-column>
                        <el-table-column label="长(cm)" align="center" prop="length"></el-table-column>
                        <el-table-column label="宽(cm)" align="center" prop="width"></el-table-column>
                        <el-table-column label="高(cm)" align="center" prop="height"></el-table-column>
                        <el-table-column label="实重(kg)" align="center" prop="weight"></el-table-column>
                        <el-table-column label="计费重" align="center" prop="jWeight"></el-table-column>
                        <el-table-column label="材积重" align="center" prop="vWeight"></el-table-column>
                        <el-table-column label="收货站点" align="center" prop="site"></el-table-column>
                        <el-table-column
                          label="状态"
                          align="center"
                          prop="status"
                          :formatter="(row) => dicts.getDictLabel({ dict: DictDirection.包裹状态, value: row.status })"
                        ></el-table-column>
                        <el-table-column label="包裹图片" align="center">
                          <template #default="{ row }">
                            <el-image
                              v-if="row.picUrl"
                              style="width: 50px; height: 50px;"
                              fit="cover"
                              :src="row.picUrl"
                              :preview-src-list="[row.picUrl]"
                            ></el-image>
                          </template>
                        </el-table-column>
                        <!-- <el-table-column label="件数" align="center" prop="pieceNumber"></el-table-column> -->
                      </el-table>
                      <div v-if="xg=='1'" style="height: 445px;">
                        <el-row>
                          <el-col :span="24">
                            <el-form :inline="true" :model="formInline" label-width="80px">
                              <el-form-item label="开始行：">
                                <el-input v-model.number="formInline.startRow"></el-input>
                              </el-form-item>
                              <el-form-item label="结束行：">
                                <el-input v-model.number="formInline.endRow"></el-input>
                              </el-form-item>
                              <el-form-item label="长：">
                                <el-input
                                  v-model="formInline.length"
                                  :min="2.54"
                                  :controls="false"
                                  type="number"
                                ></el-input>
                              </el-form-item>
                              <el-form-item label="宽：">
                                <el-input
                                  v-model="formInline.width"
                                  :min="2.54"
                                  :controls="false"
                                  type="number"
                                ></el-input>
                              </el-form-item>
                              <el-form-item label="高：">
                                <el-input
                                  v-model="formInline.height"
                                  :min="2.54"
                                  :controls="false"
                                  type="number"
                                ></el-input>
                              </el-form-item>
                              <el-form-item label="实重：">
                                <el-input
                                  v-model="formInline.weight"
                                  :min="2.54"
                                  :controls="false"
                                  type="number"
                                ></el-input>
                              </el-form-item>
                              <el-form-item style="margin-left: 20px;">
                                <el-button type="primary" @click="editHand">批量修改</el-button>
                              </el-form-item>
                              <el-form-item>
                                <el-button type="primary" @click="addHand">批量新增</el-button>
                              </el-form-item>
                              <el-form-item>
                                <el-button type="danger" @click="deleteHand">批量删除</el-button>
                              </el-form-item>
                            </el-form>
                          </el-col>
                          <el-col :span="24" class="mb8" style="height: 445px;">
                            <vxe-grid
                              ref="xGrid"
                              v-bind="gridOptions1"
                              :data="tabledata"
                              height="400"
                            >
                              <template #caseNumber_edit="{ row }">
                                <vxe-input v-model="row.caseNumber"></vxe-input>
                              </template>
                              <template #length_edit="{ row }">
                                <vxe-input v-model="row.length"></vxe-input>
                              </template>
                              <template #width_edit="{ row }">
                                <vxe-input v-model="row.width"></vxe-input>
                              </template>
                              <template #height_edit="{ row }">
                                <vxe-input v-model="row.height"></vxe-input>
                              </template>
                              <template #weight_edit="{ row }">
                                <vxe-input v-model="row.weight"></vxe-input>
                              </template>
                              <template #jWeight_edit="{ row }">
                                <vxe-input v-model="row.jWeight"></vxe-input>
                              </template>
                              <template #vWeight_edit="{ row }">
                                <vxe-input v-model="row.vWeight"></vxe-input>
                              </template>
                              <template #site_edit="{ row }">
                                <vxe-input v-model="row.site" :formatter="(row) => dicts.getDictLabel({ dict: DictDirection.收货站点, value: row.site })"></vxe-input>
                              </template>
                              <template #status_edit="{ row }">
                                <vxe-input v-model="row.status" :formatter="(row) => dicts.getDictLabel({ dict: DictDirection.包裹状态, value: row.status })"></vxe-input>
                              </template>
                              <template #picUrl_edit="{ row }">
                                <vxe-input v-model="row.picUrl"></vxe-input>
                              </template>
                              <template #operate="{ row,$index }">
                                <vxe-button
                                  title="删除"
                                  label="删除"
                                  circle
                                  @click="removeRowEvent(row,$index)"
                                >
                                  删除
                                </vxe-button>
                              </template>
                            </vxe-grid>
                          </el-col>
                          <el-col :span="24">
                            <el-button type="primary" :icon="Plus" @click="handleAddPage">增加</el-button>
                          </el-col>
                        </el-row>
                      </div>
                      <!-- <editPackage
                        v-if="xg=='1'"
                        ref="editPackages"
                        style="height: 445px;"
                        :data="updateForm.shipmentWoodInfo"
                        field="receivingWoodInfo"
                      ></editPackage> -->
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-scrollbar>
          </el-tab-pane>
          <el-tab-pane label="发票信息" name="categoryInfo">
            <el-scrollbar>
              <div>
                <el-row>
                  <el-col>
                    <el-form-item
                      v-if="xg==1"
                      label="收件人代码"
                      prop="sjrdm"
                    >
                      <el-select
                        v-model="updateForm.sjrdm"
                        filterable
                        clearable
                        placeholder="请输入内容"
                      >
                        <el-option
                          v-for="dict in dicts[DictDirection.AmazonCode]"
                          :key="dict.code"
                          :label="dict.code"
                          :value="dict.code"
                          @click="handleChangeAddress(dict)"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="国家:" prop="consigneeCountry">
                      <el-select
                        v-model="updateForm.consigneeCountry"
                        :disabled="disableds"
                        placeholder="请输入内容"
                      >
                        <el-option
                          v-for="dict in dicts[DictDirection.国家]"
                          :key="dict.countryCode"
                          :label="dict.countryChName"
                          :value="dict.countryCode"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="姓名：" prop="consigneeName">
                      <el-input v-model="updateForm.consigneeName" :disabled="disableds"></el-input>
                    </el-form-item>
                    <el-form-item label="邮编：" prop="consigneePostcode">
                      <el-input v-model.trim="updateForm.consigneePostcode" :disabled="disableds"></el-input>
                    </el-form-item>
                    <el-form-item label="公司：" prop="consigneeCompany">
                      <el-input
                        v-model="updateForm.consigneeCompany"
                        auto-complete="on"
                        :disabled="disableds"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="城市：" prop="consigneeCity">
                      <el-input v-model="updateForm.consigneeCity" :disabled="disableds"></el-input>
                    </el-form-item>
                    <el-form-item label="省州：" prop="provinceStateCode">
                      <el-input v-model="updateForm.provinceStateCode" :disabled="disableds"></el-input>
                    </el-form-item>
                    <el-form-item label="电话：" prop="consigneeTel">
                      <el-input
                        v-model="updateForm.consigneeTel"
                        auto-complete="on"
                        :disabled="disableds"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="地址1:" prop="consigneeAddress">
                      <el-input
                        v-model="updateForm.consigneeAddress"
                        :disabled="disableds"
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 4 }"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="地址:" prop="consigneeAddress2">
                      <el-input
                        v-model="updateForm.consigneeAddress2"
                        type="textarea"
                        :disabled="disableds"
                        :autosize="{ minRows: 2, maxRows: 4 }"
                      ></el-input>
                    </el-form-item>
                    <categoryInfo ref="bdRef" style="width: 98%;" @refush="initData" />
                  </el-col>
                  
                  <el-col v-if="xg==1">
                    <h3>货物图片:</h3>
                    <div>
                      <el-upload
                        ref="imgupload"
                        action="#"
                        list-type="picture-card"
                        multiple
                        accept=".jpg,.pdf"
                        :file-list="fileList"
                        :auto-upload="false"
                        :on-remove="handleRemove"
                        :on-change="handleFileChange"
                      >
                        <el-icon><Plus /></el-icon>
                      </el-upload>
                      <div style="float: right;"><el-button type="primary" @click="uploadImg">上传</el-button></div>
                    </div>
                  </el-col>
                  <el-col>
                    <div>
                      <ul class="el-upload-list el-upload-list--picture-card">
                        <li v-for="img in updateForm.goodsList" :key="img" class="el-upload-list__item is-ready">
                          <img
                            w-full
                            :src="img"
                            @click="handlePictureCardPreview({ file: img})"
                          />
                        </li>
                      </ul>
                    </div>
                    <el-dialog v-model="dialogVisible" :close-on-click-modal="false" append-to-body>
                      <img style="height: 100%;width: 100%;" :src="dialogImageUrl" alt="Preview Image" />
                    </el-dialog>
                  </el-col>
                </el-row>
              </div>
            </el-scrollbar>
          </el-tab-pane>
          <el-tab-pane label="轨迹信息" name="Trajectory">
            <el-scrollbar>
              <Trajectory ref="gjRef" />
            </el-scrollbar>
          </el-tab-pane>
          <el-tab-pane v-if="updateForm.dataSources == 6" label="运世达轨迹" name="ysd">
            <el-scrollbar>
              <el-table border :data="trackTable">
                <el-table-column label="轨迹信息" prop="info" align="center"></el-table-column>
                <el-table-column label="时间" prop="time" align="center"></el-table-column>
              </el-table>
            </el-scrollbar>
          </el-tab-pane>
          <!-- <el-tab-pane label="货物图片" name="lpUpload">
            <el-scrollbar :style="{ height: `calc( ${elContainerH - 15}px - 41px )` }"></el-scrollbar>
          </el-tab-pane> -->
        </el-tabs>
        <div v-if="xg=='1'" class="btnsContainer">
          <el-button type="primary" @click="submitForms">确定修改</el-button>
          <el-button type="primary" @click="cancel">取消</el-button>
        </div>
        <div v-if="xg=='2'" class="btnsContainer">
          <el-button type="primary" @click="cancel">关闭</el-button>
        </div>
      </el-form>
    </el-dialog>
    <!-- 打开主转单号对话框 -->
    <!-- <el-dialog :close-on-click-modal="false" title="转单号" width="30%" append-to-body>
			<el-input :rows="14" type="textarea" placeholder="请输入内容" v-model="mainTransferOrderNo"></el-input>
		</el-dialog> -->
    <!-- 打开子转单号 -->
    <!-- <el-dialog :close-on-click-modal="false" title="转单号" width="30%" append-to-body>
			<el-input :rows="14" type="textarea" placeholder="请输入内容" v-model="transferOrderNo"></el-input>
		</el-dialog>

		<el-dialog append-to-body>
			<img width="100%"  alt="" />
		</el-dialog> -->
  </div>
</template>
<script lang="ts" setup>
import { Plus } from '@element-plus/icons-vue'
import { ref, getCurrentInstance, defineAsyncComponent, defineEmits } from 'vue'
import { ElMessage, ElMessageBox, ElButton, UploadProps } from 'element-plus'
import { VxeGridInstance } from 'vxe-table'
import { getOrderDetail, receivable, editOrderInfo, editOrder, saveGoodsImages } from '@/api/expressManager/orderList'
import useDicts, { DictDirection } from '@/store/modules/dicts'

const emit = defineEmits(['refush'])
const categoryInfo = defineAsyncComponent(() => import('./categoryInfo.vue'))
const Trajectory = defineAsyncComponent(() => import('./trajectory.vue'))
const dicts = useDicts()
dicts.setDicts(DictDirection.国家)
dicts.setDicts(DictDirection.客户)
dicts.setDicts(DictDirection.产品)
dicts.setDicts(DictDirection.包裹状态)
dicts.setDicts(DictDirection.货物类型)
dicts.setDicts(DictDirection.报价类型)
dicts.setDicts(DictDirection.收货站点)
dicts.setDicts(DictDirection.计重规则)
dicts.setDicts(DictDirection.AmazonCode)
const openDetail = ref(false)
let
  // eslint-disable-next-line prefer-const
  labels = ref(null)
const loading = ref(false)
const disableds = ref(undefined)
const activeName = ref('first')
const imgupload = ref(undefined)
const ruleForm = ref({
  地址费: 0,
  报关件: '350',
  品名附加费: 0,
  '超重/超长费': '0',
  超品名费: '0',
  偏远费: '0',
  其他费用: '0',
})
const formInline = ref({
  startRow: '',
  endRow: '',
  length: '',
  width: '',
  height: '',
  weight: '',
})
const rules = {
  // customerCode: [{ required: true, message: '不能为空', trigger: ['change', 'blur'] }],
  marketProducts: [{ required: true, message: '不能为空', trigger: ['change', 'blur'] }],
  goodsType: [{ required: true, message: '不能为空', trigger: ['change', 'blur'] }],
  site: [{ required: true, message: '不能为空', trigger: ['change', 'blur'] }],
}
const title = ref(null)
const dialogVisible = ref(false)
const trackTable = ref([])
const { proxy } = getCurrentInstance() as any
const setOrder = () => {
  proxy.mainTransferOrderNo = proxy.updateForm.mainTransferOrderNo
  proxy.transferOrderNo = proxy.updateForm.transferOrderNo
}
const gjRef = ref(undefined),
  bdRef = ref(undefined),
  {
    appContext: {
      config: {
        globalProperties: { $validateForm },
      },
    },
  } = getCurrentInstance()
const checkpiece = () => {
  const ss = updateForm.value.quotationType
  console.log(ss)
  
  if (ss == '1') {
    labels.value = '单价'
    console.log(1)
  }
  if (ss == '2') {
    console.log(2)
    labels.value = '总价'
  }
  if (ss == '4') {
    labels.value = '立方总价'
  }
  if (ss == '3') {
    updateForm.value.customPrice = ''
  }
}
// 加载
const tabledata = ref([])

const handleChangeAddress = (dict) => {
  proxy.updateForm.provinceStateCode = dict.state
  proxy.updateForm.consigneePostcode = dict.postCode
  proxy.updateForm.consigneeCity = dict.city
  proxy.updateForm.consigneeAddress = dict.address
}
const handleAddPage = () => {
  const receivingWoodInfo = JSON.parse(JSON.stringify(tabledata.value))
  receivingWoodInfo.push({
    height: '',
    length: '',
    weight: '',
    width: '',
  })
  // console.log(receivingWoodInfo)
  proxy.tabledata = receivingWoodInfo
  // console.log(proxy.tabledata)
  ElMessage.success('新增成功')
}
const xGrid = ref<VxeGridInstance>()
const removeRowEvent = (row: { [key: string]: any }, index) => ElMessageBox.confirm('此操作将永久删除该条记录, 是否继续?', '警告', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  type: 'warning',
})
.then(() => {
  tabledata.value.splice(index, 1)
  ElMessage.success('删除成功!')
})
.catch(() => {
  ElMessage.info('已取消删除')
})
const editHand = () => {
  const {
    data,
    field,
    formInline: { startRow, endRow },
  } = proxy
  const receivingWoodInfo = JSON.parse(JSON.stringify(tabledata.value))
  if (startRow && endRow && endRow > startRow) {
    receivingWoodInfo.forEach((v, i) => {
      if (i + 1 <= endRow && i + 1 >= startRow) {
        const { height, length, weight, width } = proxy.formInline
        v.height = height || v.height
        v.length = length || v.length
        v.weight = weight || v.weight
        v.width = width || v.width
      }
    })
    proxy.tabledata = receivingWoodInfo
    // this.clearFormInline()
  } else {
    ElMessage.error('批量修改必须要输入开始行和结束行,并且结束行要大于开始行！')
  }
}
const deleteHand = () => {
  const {
    data,
    field,
    formInline: { startRow, endRow },
  } = proxy
  const receivingWoodInfo = JSON.parse(JSON.stringify(tabledata.value))
  if (proxy.formInline.startRow && proxy.formInline.endRow && proxy.formInline.endRow > proxy.formInline.startRow) {
    ElMessageBox.confirm(`此操作将永久删除${ proxy.formInline.startRow }-${ proxy.formInline.endRow }条记录, 是否继续?", "警告`, {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    .then(() => {
      receivingWoodInfo.splice(proxy.formInline.startRow - 1, proxy.formInline.endRow - (proxy.formInline.startRow - 1))
      proxy.tabledata = receivingWoodInfo
      ElMessage.success({
       
        message: '删除成功!',
      })
      // clearFormInline()
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除',
      })
    })
  } else {
    return ElMessage.error('批量删除必须要输入开始行和结束行,并且结束行要大于开始行！')
  }
}
const addHand = () => {
  const {
    data,
    field,
    formInline: { startRow, endRow },
  } = proxy
  const receivingWoodInfo = JSON.parse(JSON.stringify(tabledata.value))
  if (proxy.formInline.endRow && (proxy.formInline.height || proxy.formInline.length || proxy.formInline.weight || proxy.formInline.width)) {
    for (let i = 0; i < proxy.formInline.endRow; i++) {
      receivingWoodInfo.push({
        height: proxy.formInline.height || '',
        length: proxy.formInline.length || '',
        weight: proxy.formInline.weight || '',
        width: proxy.formInline.width || '',
      })
    }
    proxy.tabledata = receivingWoodInfo
    clearFormInline()
  } else {
    ElMessage.error('批量新增必须要输结束行和长、宽、高、重中任意一项！')
  }
}
const clearFormInline = () => {
  proxy.formInline = {
    startRow: '',
    endRow: '',
    length: '',
    width: '',
    height: '',
    weight: '',
  }
}

// tab切换
const handleClick = () => {
  // if(activeName="")
  const names = activeName.value
  
  const orderNo = orderNOs.value
  if (names == 'categoryInfo') {
    bdRef.value.init()
    bdRef.value.orderNos = orderNo
  }
  if (names == 'Trajectory') {
    gjRef.value.orderNos = orderNo
    gjRef.value.initKP()
  }
}
const refush = () => {
  emit('refush')
}
const updateForm = ref({
  orderNo: '',
  quotationType: '',
  customPrice: '',
  checkInMer: '',
  businessManager: '',
  splittingStatus: '',
  mainTransferOrderNo: '',
  transferOrderNo: '',
  remarks: '',
  shipmentWoodInfo: [],
  customerCode: '',
  marketProducts: '',
  goodsType: '',
  site: '',  
  receivingTotalWeight: '',
  receivingTotalWood: '',
  receivingTotalCharging: '',
  receivingTotal: '',
  receivingWoodCoefficient: '',
  receivingVolumeCoefficient: '',
  receivingWeightRule: '',
  serviceAbbreviation: '',
  waybillNo: '',
  serviceChannelcode: '',
  shipmentTime: '',
  shipmentTotalWeight: '',
  shipmentTotalWood: '',
  shipmentTotalCharging: '',
  shipmentTotal: '',
  payableAmount: '',
  clearanceTime: '',
  dataSources: '',
  caseNumber: '',
  length: '',
  width: '',
  height: '',
  weight: '',
  jWeight: '',
  vWeight: '',
  status: '',
  consigneeCountry: '',
  consigneeName: '',
  consigneePostcode: '',
  consigneeCompany: '',
  consigneeCity: '',
  provinceStateCode: '',
  consigneeTel: '',
  consigneeAddress: '',
  consigneeAddress2: '',
  info: '',
  time: '',
  woodInfoList: [],
  receivingWoodInfo: [],
  goodsList: [],
  sjrdm: '',
  
})
// 图片

const fileList = ref([])
const dialogImageUrl = ref('')
const handleRemove = (file, fileList) => {
  fileList.value = fileList
}

const handleFileChange = (file, fileList) => {
  fileList.value = fileList
}
const uploadImg = () => {
  const orderNo = orderNOs.value
  const data = new FormData()
  
  proxy.fileList.forEach(el => {
    data.append('file', el.raw)
  })

  return saveGoodsImages(orderNo, data).then(res => {
    if (res.code == 200) {
      ElMessage.success(res.msg)
      proxy.$refs.imgupload.clearFiles()
      initData()
    }
  })
}
const handlePictureCardPreview: UploadProps['onPreview'] = (data) => {
  dialogImageUrl.value = data.file!
  dialogVisible.value = true
}
const setFormRef = ref(null)
const idss = ref([])
const orderNOs = ref([])
const xg = ref([])
const btnloading = ref(false)
const handleEdit = () => {
  btnloading.value = true
  const mainTransferOrderNo = updateForm.value.mainTransferOrderNo
  const transferOrderNo = updateForm.value.transferOrderNo
  const remarks = updateForm.value.remarks
  const orderNo = updateForm.value.orderNo
  editOrderInfo({
    mainTransferOrderNo,
    transferOrderNo,
    remarks,
    orderNo,
  }).then(res => {
    if (res.code == 200) {
      ElMessage.success('修改成功')
      btnloading.value = false
    }
  }).finally(() => {
    btnloading.value = false
  })
}
const submitForms = () => { 
  // $validateForm(setFormRef.value, () => {
  //   proxy.updateForm.woodInfoList = JSON.parse(proxy.tabledata)
  //   const newForm = JSON.parse(JSON.stringify(updateForm.value))
  //   newForm.receivingWoodInfo = JSON.parse(JSON.stringify(newForm.receivingWoodInfo))
  //   editOrder(newForm).then(res => {
  //     console.log(res)
  //   })
  // })
  proxy.updateForm.shipmentWoodInfo = JSON.stringify(updateForm.value.shipmentWoodInfo)
  proxy.updateForm.woodInfoList = JSON.parse(JSON.stringify(tabledata.value))
  proxy.updateForm.ReceivingWoodInfo = JSON.stringify(proxy.updateForm.woodInfoList)
  const newForm = JSON.parse(JSON.stringify(proxy.updateForm))
 
  newForm.receivingWoodInfo = JSON.stringify(proxy.updateForm.woodInfoList)
 
  editOrder(newForm).then(res => {
    if (res.code == 200) {
      ElMessage.success('修改成功')
      cancel()
      refush()
    }
  })
}
const initData = () => {
  const id = idss.value
  const orderNo = orderNOs.value
  loading.value = true
  activeName.value = 'first'
  getOrderDetail(id).then(res => {
    if (res.code == 200) {
      res.data.quotationType = String(res.data.quotationType)
      res.data.shipmentWoodInfo = JSON.parse(res.data.receivingWoodInfo)
      res.data.goodsList = res.data.goodsList || []
      proxy.updateForm = res.data
      proxy.tabledata = JSON.parse(res.data.receivingWoodInfo)
      setOrder()
      loading.value = false
      gjRef.value.orderNos = orderNo
      bdRef.value.orderNos = orderNo
      bdRef.value.init()
      gjRef.value.initKP()
    } else {
      ElMessage.error(res.msg)
      loading.value = false
    }
  }).catch(() => {
    loading.value = false
  })
  
  receivable({ orderNo, type: 1 }).then(res => {
    if (res.code == 200) {
      const form = {}
      res.data.forEach(el => {
        if (el.feeName == '报关件') {
          el.amount = String(el.amount)
        }
        if (el.feeName == '地址费' || el.feeName == '品名附加费') {
          el.amount = el.isPrivateAddress
        }
        form[el.feeName] = el.amount
      })
      proxy.ruleForm = { 地址费: 0, ...form }
    }
    console.log(res.msg)
  })
}
const gridOptions1 = ref({
  border: true,
  showOverflow: true,
  editConfig: {
    trigger: 'click',
    mode: 'cell',
    // 2.3.4.5可点击
    activeMethod({ columnIndex }) {
      if (columnIndex === 3) {
        return true
      }
      if (columnIndex === 4) {
        return true
      }
      if (columnIndex === 5) {
        return true
      }
      if (columnIndex === 2) {
        return true
      }
      return false
    },
  },
  columns: [
    { type: 'seq', title: '序号', width: 50 },
    { field: 'caseNumber', align: 'center', title: '箱号', editRender: {}, width: '180', slots: { edit: 'caseNumber_edit' } },
    { field: 'length', align: 'center', title: '长(cm)', editRender: {}, slots: { edit: 'length_edit' } },
    { field: 'width', align: 'center', title: '宽(cm)', editRender: {}, slots: { edit: 'width_edit' } },
    { field: 'height', align: 'center', title: '高(cm)', editRender: {}, slots: { edit: 'height_edit' } },
    { field: 'weight', align: 'center', title: '实重(kg)', editRender: {}, slots: { edit: 'weight_edit' } },
    { field: 'jWeight', align: 'center', title: '计费重', editRender: {}, slots: { edit: 'jWeight_edit' } },
    { field: 'vWeight', align: 'center', title: '材积重', editRender: {}, slots: { edit: 'vWeight_edit' } },
    { field: 'site', align: 'center', title: '收货站点', editRender: {}, slots: { edit: 'site_edit' } },
    { field: 'status', align: 'center', title: '状态', editRender: {}, slots: { edit: 'status_edit' } },
    { field: 'picUrl', align: 'center', title: '包裹图片', editRender: {}, slots: { edit: 'picUrl_edit' } },
    { title: '操作', align: 'center', width: 100, slots: { default: 'operate' } },
  ],

})
defineExpose({
  openDetail,
  initData,
  idss,
  orderNOs,
  disableds,
  xg,
  title,
})
const cancel = () => {
  openDetail.value = false
  proxy.$refs.setFormRef.resetFields()
  proxy.$refs.imgupload.resetFields()
}
</script> 
<style lang="less" scoped>
/* stylelint-disable-next-line selector-class-pattern */
/deep/.el-input__inner {
  width: 200px;
}
.notes {
  color: red;
  display: block;
  height: 40px;
  line-height: 40px;
  margin-right: 10px;
}
/deep/.el-input__wrapper {
  width: 200px;
}
/* stylelint-disable-next-line selector-class-pattern */
.btnsContainer {
  position: fixed;
  bottom: 0;
  right: 18px;
  z-index: 999;
  margin-bottom: 18px;
}

</style>
